<template>
  <div>
    <div class="content">
      <div class="header">
        <!-- 修改表单区域 -->
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="商品信息" style="width: 200px">
            <el-select
              v-model="formInline.key_type"
              placeholder="请选择"
              style="width: 200px"
              @change="getselect1()"
            >
              <el-option
                v-for="item in searchselectdata"
                :key="item.value"
                :label="item.lable"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="创建时间">
                          <el-date-picker v-model="formInline._create_time" type="datetimerange" range-separator="To"
                              start-placeholder="Start date" end-placeholder="End date" />
                      </el-form-item> -->
          <el-form-item label="搜索关键字">
            <el-input
              v-model="formInline._key_word"
              placeholder="请输入关键字"
              clearable
            />
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="submitSee">查询</el-button>
            <el-button type="primary" plain @click="onSubmit">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="area">
         <div style="width: 96%;margin: 0 auto;">
          <el-tabs
          v-model="activeName"
          class="demo-tabs"
          @tab-click="handleClick"
        >
          <el-tab-pane label="收件箱" name="first">
            <div class="table-area">
              <div>
                <el-button type="warning" >批量删除</el-button>
                <el-button type="danger">清空</el-button>
              </div>
              <el-table
                border
                :data="dataList"
                stripe
                style="width: 100%; margin-top: 22px"
                      v-loading="loading"
    element-loading-text="开发中..."
              >
                <el-table-column
                  prop="id"
                  align="center"
                  label="短信标题"
                  #default="scope"
                >
                </el-table-column>
                <el-table-column
                  prop="id"
                  align="center"
                  label="内容"
                  #default="scope"
                >
                </el-table-column>
                <el-table-column
                  prop="id"
                  align="center"
                  label="发送时间"
                  #default="scope"
                >
                </el-table-column>

                <el-table-column
                  align="center"
                  fixed="right"
                  label="操作"
                  width="180px"
                >
                  <template #default="scope">
                    <div>
                      <el-button
                        type="primary"
                        size="small"
                        @click="btnAdd"
                        style="margin-bottom: 5px"
                        >编辑</el-button
                      >
                      <el-button
                        type="danger"
                        plain
                        size="small"
                        @click="shenji(scope.row, 0)"
                        style="margin-bottom: 5px"
                        >删除</el-button
                      >
                    </div>
                  </template>
                </el-table-column>
              </el-table>
              <div class="pagination-container">
                <el-pagination
                  :current-page="currentPage"
                  :page-size="pageSize"
                  :total="total"
                  :page-sizes="[10, 20, 30, 50]"
                  layout="total, sizes, prev, pager, next, jumper"
                  @size-change="handlePageSizeChange"
                  @current-change="handleCurrentPageChange"
                />
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="发件箱" name="second">
            <div class="table-area">
              <div>
                <el-button type="primary" @click="btnAdd">短信发送</el-button>
                <el-button type="warning" >批量删除</el-button>
                <el-button type="danger">清空</el-button>
              </div>
              <el-table
                border
                :data="dataList"
                stripe
                style="width: 100%; margin-top: 22px"
                v-loading="loading"
    element-loading-text="开发中..."
              >
              >
                <el-table-column
                  prop="id"
                  align="center"
                  label="短信标题"
                  #default="scope"
                >
                </el-table-column>
                <el-table-column
                  prop="id"
                  align="center"
                  label="消息对象"
                  #default="scope"
                >
                </el-table-column>
                <el-table-column
                  prop="id"
                  align="center"
                  label="发送时间"
                  #default="scope"
                >
                </el-table-column>

                <el-table-column
                  align="center"
                  fixed="right"
                  label="操作"
                  width="180px"
                >
                  <template #default="scope">
                    <div>
                      <el-button
                        type="primary"
                        size="small"
                        @click="btnAdd"
                        style="margin-bottom: 5px"
                        >查看</el-button
                      >
                      <el-button
                        type="danger"
                        plain
                        size="small"
                        @click="shenji(scope.row, 0)"
                        style="margin-bottom: 5px"
                        >删除</el-button
                      >
                    </div>
                  </template>
                </el-table-column>
              </el-table>
              <div class="pagination-container">
                <el-pagination
                  :current-page="currentPage"
                  :page-size="pageSize"
                  :total="total"
                  :page-sizes="[10, 20, 30, 50]"
                  layout="total, sizes, prev, pager, next, jumper"
                  @size-change="handlePageSizeChange"
                  @current-change="handleCurrentPageChange"
                />
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
         </div>

        <!-- 新增分页组件 -->
      </div>
    </div>

    <!-- 图片预览对话框 -->
    <div class="image-overlay">
      <el-dialog v-model="imgShow" :show-close="false" width="36%">
        <img style="width: 100%" :src="currentImage" alt="" />
      </el-dialog>
    </div>

    <!-- 编辑升级任务 -->
    <el-dialog
      v-model="dialogVisible2"
      :title="titleName"
      width="50%"
      :before-close="handleClose"
    >
      <div class="tblas">

        <div>
          <span>类型</span>
          <div style="margin-top: 8px">
            <el-radio-group v-model="radio">
              <el-radio :label="3">用户</el-radio>
              <el-radio :label="6">等级</el-radio>
              <el-radio :label="9">地区</el-radio>
              <el-radio :label="8">权限</el-radio>
            </el-radio-group>
          </div>
        </div>
        <div style="margin-top: 18px">
          <span>短信接收人ID</span>
          <div style="margin-top: 8px">
            <el-input
              style="width: 202px"
              v-model="formInline._key_word"
              placeholder="请输入短信接收人ID"
              clearable
            />
          </div>
        </div>
      
      
        <div style="margin-top: 18px">
          <span>消息标题</span>
          <div style="margin-top: 8px">
            <el-input
           
              style="width: 502px"
              v-model="formInline._key_word"
              placeholder="请输入分类标题"
              clearable
            />
          </div>
        </div>
        <div style="margin-top: 18px">
          <span>短信内容</span>
          <div style="margin-top: 8px">
            <div
              @input="updateContent"
              ref="editorContainer"
              class="custom-editor"
              style="height: 300px"
            ></div>
          </div>
        </div>
      </div>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible2 = false">取消</el-button>
          <el-button type="primary" @click="dialogVisible2 = false">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { Plus } from "@element-plus/icons-vue";
import Quill from "quill";
import "quill/dist/quill.snow.css"; // 引入样式
import type { UploadProps } from "element-plus";
const editorContainer = ref("");
import { delOrder } from "~/base/api/order/orderList.ts";
import {
  getList,
  getCustomerListRenderBeforeData,
} from "~/base/api/admin/adminList.ts";
import {
  PictureFilled,
  ArrowDown,
  CopyDocument,
  Picture,
  ArrowUp,
} from "@element-plus/icons-vue";
import { reactive, ref, onMounted, onBeforeUnmount } from "vue";
import axios from "axios";
import { Loading } from "@element-plus/icons-vue";
import {
  ElMessageBox,
  ElMessage,
  ElLoading,
  componentSizeMap,
} from "element-plus";
import { range } from "lodash-es";
import { select } from "radash";
import order from "@/router/static-routes/order";
import { Row } from "element-plus/lib/components/table-v2/src/components/index.js";
const names = ref(0);
const heShow = ref(true);
const actives = ref(0);
const titleName = ref("新增");
const dialogVisible = ref(false);
const dialogVisible2 = ref(false);
const imgShow = ref(false);
// 图片预览相关状态
const previewVisible = ref(false);
const currentImage = ref("");
const statuss = ref("");
const tableData = ref([
  {
    date: "2016-05-03",
    name: "Tom",
    state: "California",
    city: "Los Angeles",
    address: "No. 189, Grove St, Los Angeles",
    zip: "CA 90036",
    tag: "Home",
  },
  {
    date: "2016-05-02",
    name: "Tom",
    state: "California",
    city: "Los Angeles",
    address: "No. 189, Grove St, Los Angeles",
    zip: "CA 90036",
    tag: "Office",
  },
  {
    date: "2016-05-04",
    name: "Tom",
    state: "California",
    city: "Los Angeles",
    address: "No. 189, Grove St, Los Angeles",
    zip: "CA 90036",
    tag: "Home",
  },
  {
    date: "2016-05-01",
    name: "Tom",
    state: "California",
    city: "Los Angeles",
    address: "No. 189, Grove St, Los Angeles",
    zip: "CA 90036",
    tag: "Office",
  },
]);
const drawer = ref(false);
const tabname = ref(0);
const num = ref(1);
const loading=ref(true)
const num2 = ref(1);
const quillInstance = ref(null);
const editorContent = ref("");
const dengji = ref("");
const orderstatuslist = ref([]);
const searchselectdata = ref([]);
const goodstypelist = ref([]);
const dockinglist = ref([]);
const ranges = ref([]);
const orderfrom = ref([]);
const activeName = ref("first");
//下拉搜索
function getselect1() {
  getSetdocking();
}
function getselect2() {
  getSetdocking();
}
function getselect3() {
  getSetdocking();
}
function getselect4() {
  getSetdocking();
}
function getselect5() {
  getSetdocking();
}
function getKami(e) {
  console.log("这个获取的是什么", e, form.value.card_ids);
  let bobo = [];
  for (let item of e) {
    bobo.push(item.id);
  }
  console.log("测试波波是多少", bobo.join(","));
  form.value.card_ids = bobo.join(",");
}

//点击展开
function btnHe() {
  heShow.value = false;
}
function btnHe2() {
  heShow.value = true;
}
function initQuill() {
  console.log("为什么先走这个符文布");
  try {
    // 检查DOM元素是否存在
    if (!editorContainer.value) throw new Error("DOM容器未就绪");

    // 初始化Quill实例，并保存到quillInstance
    quillInstance.value = new Quill(editorContainer.value, {
      theme: "snow",
      modules: {
        toolbar: [
          // 标题格式
          [{ header: [1, 2, 3, 4, 5, 6, false] }],

          // 基本文字格式
          ["bold", "italic", "underline", "strike"],

          // 文字颜色和背景色
          [{ color: [] }, { background: [] }],

          // 字体和字号
          [{ font: [] }, { size: ["small", false, "large", "huge"] }],

          // 列表
          [{ list: "ordered" }, { list: "bullet" }],

          // 对齐方式
          [{ align: [] }],

          // 缩进
          [{ indent: "-1" }, { indent: "+1" }],

          // 链接和图片
          ["link", "image", "video"],

          // 代码块、引用、公式
          ["code-block", "blockquote", "formula"],

          // 清除格式
          ["clean"],
        ],
      },
    });

    // 设置初始内容
    if (editorContent.value) {
      quillInstance.value.root.innerHTML = editorContent.value;
    }

    // 监听编辑器的变化
    quillInstance.value.on("text-change", () => {
      if (ignoreInternalUpdate) return;
      const newHTML = quillInstance.value.root.innerHTML;

      // 只有当内容确实改变时才更新editorContent
      if (editorContent.value !== newHTML) {
        ignoreInternalUpdate = true;
        editorContent.value = newHTML;
        ignoreInternalUpdate = false;
      }
    });
  } catch (e) {
    console.error("初始化Quill失败:", e);
    boboShow.value = true;
  }
}
// 打开图片预览
const openImagePreview = (imageUrl) => {
  console.log("11111", imageUrl);
  currentImage.value = imageUrl;
  imgShow.value = true;
};

// 关闭图片预览
const closeImagePreview = () => {
  previewVisible.value = false;
};

// 更现代的复制函数（推荐）
async function btnOrdersn2(orderSn) {
  try {
    // 使用现代clipboard API
    await navigator.clipboard.writeText(orderSn);

    // 显示成功提示
    if (ElNotification) {
      ElNotification({
        title: "复制成功",
        message: `已复制订单号：${orderSn}`,
        type: "success",
        duration: 1500,
      });
    } else {
      alert(`已复制：${orderSn}`);
    }
  } catch (err) {
    console.error("复制失败:", err);
    // 降级方案
    const tempTextarea = document.createElement("textarea");
    tempTextarea.value = orderSn;
    document.body.appendChild(tempTextarea);
    tempTextarea.select();

    try {
      document.execCommand("copy");
      ElMessage({
        message: "复制成功",
        type: "success",
      });
    } catch (fallbackErr) {
      console.error("降级复制失败:", fallbackErr);
    } finally {
      document.body.removeChild(tempTextarea);
    }
  }
}

// 更现代的复制函数（推荐）
async function btnOrdersn5(orderSn) {
  try {
    // 使用现代clipboard API
    await navigator.clipboard.writeText(orderSn);

    // 显示成功提示
    if (ElNotification) {
      ElNotification({
        title: "复制成功",
        message: `已复制订单号：${orderSn}`,
        type: "success",
        duration: 1500,
      });
    } else {
      alert(`已复制：${orderSn}`);
    }
  } catch (err) {
    console.error("复制失败:", err);
    // 降级方案
    const tempTextarea = document.createElement("textarea");
    tempTextarea.value = orderSn;
    document.body.appendChild(tempTextarea);
    tempTextarea.select();

    try {
      document.execCommand("copy");
      ElMessage({
        message: "复制成功",
        type: "success",
      });
    } catch (fallbackErr) {
      console.error("降级复制失败:", fallbackErr);
    } finally {
      document.body.removeChild(tempTextarea);
    }
  }
}
const orderObj = ref({});
const recharge_hints = ref("");

const form = ref({
  card_ids: "",
  backmoney_part: "",
  address_company: "",
  money1: "",
  checked1: "true",
  backmoney_type: "2",
  order_style: "1",
  current_progress: "",
  target_progress: "",
  recharge_hints: "",
  start_progress: "",
  status: 3, // 数字
  address_ordersn: "",
});

const dataUser = ref([]);
//查看详情
function btnSee(e) {
  getCustomerListRenderBeforeData({ id: e.id }).then((res) => {
    console.log("详情结果", res);

    drawer.value = true;
    orderObj.value = res.data.user_info;
    dataUser.value = res.data.user_level_list;
    for (let item of res.data.user_level_list) {
      if (orderObj.value.level_id == item.value) {
        dengji.value = item.lable;
      }
    }
    if (orderObj.value.status == 1) {
      orderObj.value.status = true;
    } else {
      orderObj.value.status = false;
    }
    if (orderObj.value.noneed_userinput_pass == 1) {
      orderObj.value.noneed_userinput_pass = false;
    } else {
      orderObj.value.noneed_userinput_pass = true;
    }
    if (orderObj.value.weixin_nickname == "") {
      orderObj.weixin_nickname = "未绑定";
    }
    if (orderObj.value.qq == "") {
      orderObj.value.qq = "未绑定";
    }
    if (orderObj.value.is_team_head == 0) {
      orderObj.value.is_team_head = false;
    } else {
      orderObj.value.is_team_head = true;
    }
  });
}
const dataList = ref([]);
// 添加响应式检测
const isMobile = ref(false);

const channelTreeData = ref([]); // 渠道树形结构数据
const currentPage = ref(1); // 当前页码
const pageSize = ref(10); // 每页显示数量
const total = ref(0); // 总记录数
const keyword = ref("");
const keytype = ref("");
const fenDate = ref([
  {
    name: "首页公告",
  },
  {
    name: "行业动态",
  },
  {
    name: "常见问题",
  },
  {
    name: "帮助信息",
  },
  {
    name: "最新动态",
  },
]);
const formInline = reactive({
  _key_word: "",
  _key_type: "",
  _status: "",
  supplier_id: "",
  docking_id: "",
  cost_price: "",
  face_price: "",
  _goods_from: "",
  _goods_type: "",
  _time_range: "",
  _end_time_range: "",
  price: "",
});
const value = ref("");
const options = [
  {
    value: "Option1",
    label: "等级1",
  },
  {
    value: "Option2",
    label: "等级2",
  },
];
function handleIpClick(ip) {
  const url = `https://www.ip138.com/iplookup.php?ip=${encodeURIComponent(ip)}`;
  window.open(url, "_blank"); // 打开新标签页
}
//用户等级
function btnDeng() {
  dialogVisible.value = true;
}
//点击tab切换
function btnName(e) {
  actives.value = e;
}
//点击电锯切换
function btnTable(e) {
  tabname.value = e;
}
function handleUpdateNode({ id, property, value }) {
  // 更新树数据中对应节点的属性
  const updateNode = (nodes) => {
    return nodes.map((node) => {
      if (node.id === id) {
        return { ...node, [property]: value };
      }
      if (node.list) {
        return { ...node, list: updateNode(node.list) };
      }
      return node;
    });
  };
  channelTreeData.value = updateNode(channelTreeData.value);
}

// 删除方法
const handleDelete = (id: string) => {
  ElMessageBox.confirm("确定要删除这条记录吗?", "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      // 这里调用删除API
      delOrder({ id: id }).then(() => {
        ElMessage.success("删除成功");
        //fetchData(); // 刷新列表
        getSetdocking();
      });
    })
    .catch(() => {
      ElMessage.info("已取消删除");
    });
};

// 查询处理
const handleQuery = () => {
  currentPage.value = 1; // 重置为第一页
  getSetdocking();
};

// 重置查询条件
const handleReset = () => {
  formInline.user = "";
  handleQuery();
};
// 分页尺寸变化
const handlePageSizeChange = (size: number) => {
  pageSize.value = size;
  getSetdocking();
};

// 页码变化
const handleCurrentPageChange = (page: number) => {
  currentPage.value = page;
  getSetdocking();
};
onMounted(() => {
  getSetdocking();
});
//新增打开弹框
function btnAdd() {
  dialogVisible2.value = true;
  nextTick(() => {
    initQuill();
  });
}
function btnEditn() {
  dialogVisible.value = true;
}
//升级任务
function shenji() {
  dialogVisible2.value = true;
}
//查询
function submitSee() {
  console.log("erer");
  getSetdocking();
}
function getFullInfoText(infoArray) {
  if (!Array.isArray(infoArray)) return "";

  // 过滤有效值并格式化为可读文本
  return infoArray
    .map((item) => {
      //const key = item.key?.trim() || "参数";
      const val = item.value?.toString() || "";
      return ` ${val}`;
    })
    .join("\n"); // 用换行符分隔每个条目
}

//列表
function getSetdocking() {
  // 显示 loading
  const loadingInstance = ElLoading.service({
    target: ".el-dialog", // 针对对话框区域
    lock: true,
    text: "正在加载数据中...",
    background: "rgba(0, 0, 0, 0.7)",
  });
  let parm = {
    page: currentPage.value,
    limit: pageSize.value,
    ...formInline,
  };
  getList(parm)
    .then((res) => {
      if (res.code == 200) {
        dataList.value = res.data.data;
        console.log("获取的数据", dataList.value);
        for (let item of dataList.value) {
          if (item.status == 1) {
            item.status = true;
          } else {
            item.status = false;
          }
        }
        if (res.data.data) {
          total.value = Number(res.data.count);
        }

        console.log("获取的数据222", dataList.value);
      }
    })
    .finally(() => {
      // 数据加载完成后关闭 loading
      loadingInstance.close();
    });
}
</script>
<style>
.el-input.is-disabled .el-input__wrapper {
  background: white !important;
}
</style>
<style scoped>
.deep .el-input.is-disabled .el-input__wrapper {
  background: white !important;
}
.order-titme {
}

.iconss {
  color: #999;
  cursor: pointer;
  position: relative;
  top: 3px;
}
.actives {
  background-color: #f0f7ff !important;
}
.iconss:hover {
  color: #1890ff;
}

.icons {
  font-size: 21px !important;
  position: relative !important;
  top: 18px !important;
  padding-right: 28px !important;
  left: 12px !important;
}

.icons2 {
  font-size: 50px !important;
  position: relative !important;
  top: 10px !important;
  padding-right: 28px !important;
  left: 12px !important;
}

.sanfang {
  margin-left: 12px;
  font-size: 11px;
  color: #1890ff;
  cursor: pointer;
}
.lie-top {
  display: flex;
  justify-content: center;
}
.lie-input {
  width: 100%;
  background-color: white;
}
.orders-names {
}

.order-names {
  display: flex;
  margin-top: 15px;
}

.order-information {
}

.order-detail {
  height: 142px;
  border-bottom: 1px solid #3333;
  margin-top: 10px;
  font-size: 13px;
  padding-bottom: 14px;
}

.activeTab {
  border-bottom: 1px solid #1890ff !important;
  color: #1890ff !important;
}

.activeTabs {
  border-bottom: 1px solid #1890ff !important;
  color: #1890ff !important;
}

.area-tab {
  display: flex;
  position: relative;
  left: -28px;
}
.area-tabs {
  height: 50vh;
  overflow: auto;
}

.area-name {
  margin-left: 30px;
  cursor: pointer;
  height: 31px;
}

.areas-header {
  height: 32px;
  border-bottom: 1px solid #3333;
  width: 100%;
}

.bianhao {
  margin-top: 16px;
  margin-left: 9px;
  font-size: 13px;
}

.right-name {
  margin-left: 8px;
}

.areas {
  width: 98%;
  margin: 0 auto;

  margin-top: 40px;
}

.quxiao {
  /* color: white;
          background-color: rgba(0, 0, 0, .65); */
  font-size: 12px;
  margin-top: 8px;
}

.type-name {
  margin-left: 80px;
}
.imgs {
  width: 70px;
  height: 70px;
  position: relative;
  top: 4px;
  border-radius: 6px;
}
.area-left {
  width: 24%;
}
.lefts {
  width: 84%;
  border: 1px solid #3333;
  height: 300px;
  margin-left: 18px;
  position: relative;
  top: 23px;
  border-radius: 8px;
}
.xx {
  position: absolute;
  right: -4px;
  color: red;
  top: -7px;
  cursor: pointer;
}
.types {
  display: flex;
  margin-top: 30px;
  position: relative;

  font-size: 13px;
}
.inputs2 {
  width: 60vw;
  padding-left: 12px;
}

.imgsleft {
  width: 70px;
  height: 70px;
}

.img-left {
  width: 9%;
}

.img-content {
  margin-top: 12px;
  display: flex;
}

.contents-title {
  display: flex;
  margin-top: 14vh;
  justify-content: space-between;
}

.unbers {
  color: #1890ff;
  background-color: #e8f4ff;
  border-color: #d1e9ff;
  margin-left: 12px;
  font-size: 11px;
  height: 22px;
  width: 56px;
  text-align: center;
}

.ordername {
  color: #333;
  border: 1px solid #3333;
  border-color: #333;
  /* padding: 1px 9px 1px 9px; */
  margin-left: 12px;
  height: 22px;
  width: 56px;
  text-align: center;
  font-size: 11px;
  line-height: 22px;
}

.kami {
  color: #13ce66;
  background-color: #e7faf0;
  border-color: #d0f5e0;
  font-size: 11px;
  height: 22px;
  width: 56px;
  text-align: center;
}
a {
  text-decoration: none;
  color: inherit;
}
.shu2 {
  width: 3px;
  height: 20px;
  background-color: #1890ff;
  position: relative;
  top: 25px;
  left: -8px;
}
.zhuangtai {
  display: flex;
  margin-top: 12px;
  font-size: 13px;
}
.imgs {
  width: 50px;
  height: 50px;
  position: relative;
  top: 4px;
  border-radius: 6px;
}
.right-header {
  width: 100%;
  border: 1px solid #3333;
  height: 80px;
}
.rights {
  display: flex;
  justify-content: space-between;
  width: 90%;
  margin: 0 auto;
  margin-top: 26px;
}
.shoyue {
  width: 72%;
  margin: 0 auto;
  margin-top: 12px;
  padding-left: 30px;
  padding-bottom: 2px;
  padding-top: 2px;
  cursor: pointer;
}
.left-header {
  height: 60px;
  width: 100%;
  line-height: 60px;
  border-bottom: 1px solid #3333;
}
.table-name {
  color: #1890ff;
  width: 60px;
  margin: 0 auto;
  cursor: pointer;
  font-size: 11px;
  text-align: center;
  height: 23px;
  line-height: 23px;
}

.table-name2 {
  border-color: rgba(0, 0, 0, 0.65);
  color: white;
  padding: 3px 5px 3px 9px;
  cursor: pointer;
}

.footerss {
  display: flex;
  width: 96%;
  margin: 0 auto;
  font-size: 13px;
}
.imglists {
  display: flex;
  margin-left: 9px;
  position: relative;
}
.footers {
  width: 98%;
  border: 1px solid #3333;
  margin: 0 auto;
  height: 100px;
  margin-top: 25px;
}

.tabname {
  color: #409eff !important;
  border-bottom: 2px solid #409eff !important;
}

.tab-name {
  margin-left: 18px;
  cursor: pointer;
  height: 30px;
}
.inputs {
  margin-top: 12px;
}
.header-area {
  display: flex;
  position: relative;
  left: -18px;
  top: 1px;
}

.names {
  background: #409eff !important;
  color: white !important;
  border: none !important;
}

.jiaoyi {
  background-color: #13ce66;
}

.header-name {
  border-radius: 20px;
  padding: 3px 16px 3px 16px;
  border: 1px solid #9999;
  margin-left: 12px;
  font-size: 13px;
  cursor: pointer;
}

.headers {
  display: flex;
  padding-bottom: 12px;
}

.m-2 {
  width: 160px;
}

.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}

.configurations {
  margin-top: 12px;
}

.configuration-area {
}

.dialog-footer {
  margin: 0 auto;
  margin-top: 30px;
  text-align: center;
}

.orders-name {
  margin-top: 12px;
}

.orders {
  margin-left: 12px;
}

.order-area {
  width: 98%;
  padding-bottom: 12px;
  border: 1px solid #409eff;
  background-color: #e8f4ff;
}
.zanwu {
  display: flex;
  justify-content: center;
  position: relative;
  top: 25vh;
}
.tabs-area {
  margin-top: 12px;
}
.he {
  margin-left: 12px;
  color: #1890ff;
  cursor: pointer;
}
.diolog-content {
}

.shu {
  width: 3px;
  height: 20px;
  background-color: #1890ff;
  position: relative;
  top: 19px;
}

.shuaxin {
  font-size: 12px;
  color: #409eff;
  padding-right: 2px;
  cursor: pointer;
}

.table-area {
  width: 98%;
  margin: 0 auto;
  margin-top: 30px;
}

.tabs-price {
  border: 1px solid #3333;
  padding: 5px 12px 3px 12px;
}

.timeShow {
  color: red !important;
}

.tabs {
  margin-left: 10px;
}

.tab-header {
  display: flex;
  width: 100%;
}
.info-area {
  display: flex;
  white-space: nowrap;
  width: 88%;

  text-overflow: ellipsis;
  white-space: nowrap;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;

  cursor: pointer;
}
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
  text-align: center;
}
.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}
.custom-editor {
  flex-grow: 1; /* 编辑区域填充剩余空间 */
}
.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
.avatar-uploader {
  position: relative;

  left: 10px;
  width: 80px;
  height: 80px;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s;
}
.avatar-uploader:hover {
  border-color: #409eff;
  background-color: #f5f7fa;
}
.info-area2 {
}
.info-area:hover {
  color: #1890ff;
}
.area {
  width: 100%;
  background-color: white;
  padding-bottom: 28px;
  margin-top: 18px;
  padding-top: 14px;

}

.content {
  width: 96%;
  margin: 0 auto;
  height: 80vh;
  margin-top: 26px;
}

.header {
  background-color: white;
  padding: 17px 0 1px 12px;
  border-radius: 8px;
}

.is-loading {
  animation: rotating 2s linear infinite;
}

@keyframes rotating {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* 基础响应式设置 */
.content {
  width: 96%;
  margin: 0 auto;
  margin-top: 26px;
  padding-bottom: 20px;
}

/* 表格区域响应式 */
.table-area {
  width: 100%;
  margin: 0 auto;
  margin-top: 20px;
  overflow-x: auto;
}

/* 分页容器 */
.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  overflow-x: auto;
}

/* 对话框内容 */
.diolog-content {
  padding: 10px;
}

/* 标签页区域 */
.tabs-area {
  margin-top: 12px;
}

/* 配置区域 */
.configurations {
  margin-top: 12px;
}

/* 对话框底部按钮 */
.dialog-footer {
  margin: 20px auto 0;
  text-align: center;
}
.nameshopping {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 70px;
  cursor: pointer;
  text-align: center;
}
.nameshopping:hover {
  color: #1890ff;
}
/* 订单区域 */
.order-area {
  width: 100%;
  padding: 12px;
  border: 1px solid #409eff;
  background-color: #e8f4ff;
  box-sizing: border-box;
}
.tblas {
}
/* 刷新按钮样式 */
.shuaxin {
  font-size: 12px;
  color: #409eff;
  padding-right: 2px;
  cursor: pointer;
}

/* 加载动画 */
.is-loading {
  animation: rotating 2s linear infinite;
}

@keyframes rotating {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}
.tupians {
  display: flex;
}
/* 响应式调整 */
@media (max-width: 768px) {
  /* 头部表单 */
  .header {
    padding: 10px;
  }

  /* 表单项目 */
  .el-form-item {
    width: 100%;
    margin-right: 0;
    margin-bottom: 10px;
  }

  /* 标签页 */
  .el-tabs {
    overflow-x: auto;
  }

  /* 对话框内容 */
  .diolog-content {
    padding: 5px;
  }

  /* 输入框宽度 */
  .el-input {
    width: 100% !important;
  }

  /* 表格操作按钮 */
  .el-table-column--fixed-right .el-button {
    margin-bottom: 5px;
  }

  /* 标签页头 */
  .tab-header {
    flex-direction: column;
  }

  .tabs {
    margin: 5px 0;
  }

  /* 对话框标题 */
  .el-dialog__title {
    font-size: 16px;
  }
}

/* PC端特定样式 */
@media (min-width: 769px) {
  .content {
    /* max-width: 1200px; */
  }

  .table-area {
    width: 98%;
  }

  .diolog-content {
    min-width: 500px;
  }

  .el-form--inline .el-form-item {
    margin-right: 10px;
  }
}
</style>
